//首先定义一个代表1rem等于多少位图像素的值，用位图像素/该值就可以转换成rem 此时所量即所得
@rem: 750/16rem;
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    //设置统一的文字，如果元素需要新的设置值需要选中该元素然后在内部设置，如果只是从父类继承的话它的优先级比不上通用选择器
    font-size: 24/@rem;
    font-family: "PingFang SC",miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;
    list-style: none;
}
html,
body {
    height: 100%;
    //禁止滚动条
    overflow-x: hidden;
}
//在js文件中可以不写;但是css样式中的;不可以省略 要注意
.clearfix:before,
.clearfix:after {
    content: '';
    display: table;
    clear: both;
}
.head {
    height: 88/@rem;
    padding: 0 30/@rem;
    display: flex;
    justify-content: space-between; //  垂直居中：设置上下外边距 vertical-align line-height 绝对定位 绝对定位+reanform 弹性布局
    align-items: center;
    background-color: #F5F5F5;
    a {
        display: block;
        height: 44/@rem;
        img {
            //          设置图片顶格对齐 让其和图片容器之间没有间隙
            vertical-align: top;
            height: 100%;
        }
    }
}
.container {
    background-color: #B7EBD5;
    .carouse-list {
        //      height: 455/@rem;
    }
    .con-wrap {
        margin: 0 18/@rem;
        height: 100%;
        overflow: hidden;
        .activity {
            .intro {
                padding: 20/@rem 0;
                display: flex;
                justify-content: space-between;
                color: white;
                height: 86/@rem;
                div {
                    span {
                        vertical-align: top;
                        font-size: 28/@rem;
                    }
                    a {
                        display: inline-block;
                        border-radius: 10%;
                        height: 100%;
                        background-color: #92BCAA;
                        padding: 8/@rem;
                        //span在div中的位置并不是正好中间之类的特殊位置
                        span {
                            text-align: center;
                            font-size: 24/@rem;
                        }
                    }
                }
            }
            .discount {
                display: flex;
                & > div + div {
                    margin-left: 10/@rem;
                }
                padding-bottom: 20/@rem;
                .coupon {
                    //              由于最上面的限量没有变为很小的字体 所以下面的内容会溢出
                    overflow: hidden;
                    background-color: #FFFCD7;
                    height: 130/@rem;
                    flex: 1;
                    & > div:first-child {
                        //相对定位不会脱离文档流 原来位置不会被占据
                        position: relative;
                        left: 0;
                        top: 0;
                        display: inline; //                      有最小字体限制，设定无法生效
                        //                      font-size:22/@rem;
                        background-color: #FFAE2C;
                        span {
                            color: white;
                            font-size: 3/@rem;
                        }
                    }
                    .money {
                        display: flex;
                        align-items: center;
                        span {
                            color: #ff0045;
                        }
                        & > span:nth-child(2) {
                            font-size: 48/@rem;
                        }
                        & > span:nth-child(3) {
                            width: 164/@rem;
                        }
                        & > span:nth-child(4) {
                            display: block;
                            background-color: #ff0045;
                            padding: 5/@rem;
                            border-radius: 10/@rem;
                            color: #ffffff;
                        }
                    }
                    .expla {
                        background-color: #FFD882;
                        height: 46/@rem;
                        text-align: center;
                        padding-top: 10/@rem;
                    }
                }
            }
        }
        .one {
            background-color: #FFFFFF;
            .tit {
                background-color: #FE3316;
                height: 80/@rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-weight: bold;
                & > div:first-child {
                    span {
                        vertical-align: middle;
                        font-size: 36/@rem;
                        color: #FFFFFF;
                        line-height: 80/@rem;
                    }
                    img {
                        vertical-align: top;
                        height: 80/@rem;
                    }
                }
                & > div:nth-child(2) {
                    color: #FFFFFF;
                    span {
                        font-size: 24/@rem;
                    }
                    img {
                        color: #ffffff;
                        height: 20/@rem;
                        margin-right: 20/@rem;
                    }
                }
            }
            .goods {
                padding-top: 8/@rem;
                display: flex;
                height: 350/@rem;
                .detail {
                    flex: 1;
                    div {
                        //text-align要在span的外面使用
                        text-align: center;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        img {
                            height: 214/@rem;
                        }
                    }
                    & > div:nth-child(2) {
                        width: 220/@rem;
                    }
                    .price {
                        font-weight: bold;
                        color: #FF0045;
                        padding-top: 30/@rem;
                        padding-left: 11/@rem;
                        & > div:first-child {
                            height: 50/@rem;
                            float: left;
                            display: flex;
                            align-items: baseline;
                            padding-top: 10/@rem;
                            span {
                                font-size: 31/@rem;
                            }
                            img {
                                height: 22/@rem;
                            }
                        }
                        & > div:nth-child(2) {
                            float: right;
                            border-radius: 50%;
                            background-color: #ff0045;
                            height: 48/@rem;
                            width: 48/@rem;
                            padding: 10/@rem;
                            img {
                                color: #FFFFFF;
                                height: 28/@rem;
                            }
                        }
                    }
                }
            }
            .more {
                border-top: 5/@rem solid #F2F2F2;
                height: 90/@rem;
                display: flex;
                justify-content: center;
                align-items: center;
                a {
                    display: table-cell;
                    width: 614/@rem;
                    height: 56/@rem;
                    border: solid 3/@rem #FF0045;
                    text-align: center;
                    line-height: 50/@rem;
                    span {
                        font-size: 28/@rem;
                        color: #FF0045;
                        font-weight: bold;
                    }
                }
            }
        }
        .nav {
            position: relative;
            height: 80/@rem;
            margin: 18/@rem 0 12/@rem;
            background-color: #FFFFFF;
            //nav-list浮动了所以后面的mask可以占据原来的位置
            .nav-list {
                //让容器内多行元素排列的时候不要换行 作用于行内元素
                white-space: nowrap; //   
                float: left;     //      开启浮动让宽度被元素撑开否则nav-list继承父亲的宽度 元素变为inline-block让不换行生效就会在一行上排列下去
                li {
                    &.active {
                        background-color: #FF0036;
                    }
                    display: inline-block;
                    padding: 0 20/@rem;
                    a {
                        display: block;
                        height: 80/@rem;
                        line-height: 80/@rem;
                        span {
                            font-size: 30/@rem; //                          底部有一个小红条
                        }
                    }
                }
            }
            .mask-btn {
                position: absolute;
                z-index: 199;
                right: 0;
                top: 0;
                height: 80/@rem;
                width: 84/@rem;
                background-color: #fff;
                box-shadow: -1/@rem 1/@rem 1/@rem lightgray;
                padding: 20/@rem;
                //应该使用雪碧图
                img {
                    width: 45/@rem;
                    height: 40/@rem;
                }
            }
            .mask {
                display: none;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 99;
                background-color: #fff;
                .mask-tit {
                    height: 80/@rem;
                    padding: 0 24/@rem;
                    border-bottom: solid 1/@rem #EDEDED;
                    text-align: center;
                    color: #929292;
                    line-height: 80/@rem;
                    span {
                        font-size: 28/@rem;
                        font-weight: bold;
                    }
                }
                .mask-list {
                    padding: 28/@rem 44/@rem 16/@rem;
                    li {
                        float: left;
                        width: 208/@rem;
                        height: 60/@rem;
                        margin-bottom: 20/@rem;
                        line-height: 60/@rem;
                        text-align: center;
                        span {
                            font-size: 30/@rem;
                        }
                        &.active {
                            background-color: #FF0036;
                        }
                    }
                    &:after {
                        display: table;
                        content: '';
                        clear: both;
                    }
                }
            }
        }
        .shop {
            .shop-tit {
                height: 62/@rem;
                line-height: 62/@rem;
                text-align: center;
                span {
                    font-size: 36/@rem;
                    font-weight: bold;
                    color: white;
                }
            }
            .shop-list {
                display: grid;
                grid-template-rows: repeat(10,192/@rem);
                grid-template-columns: repeat(2,auto);
                grid-gap: 5/@rem;
                .shop-detail {
                    position: relative;
                    display: flex;
                    background-color: #fff;
                    .shop-img {
                        float: left;
                        margin: 16/@rem 0 34/@rem 12/@rem;
                        img {
                            vertical-align: top;
                            width: 140/@rem;
                            height: 140/@rem;
                        }
                        .num {
                            padding: 0 6/@rem;
                            position: absolute;
                            top: 139/@rem;
                            background-color: #FF0045;
                            color: #fff;
                        }
                    }
                    .shop-intro {
                        float: left;
                        padding: 16/@rem 16/@rem 16/@rem 8/@rem;
                        width: 180/@rem;
                        & > div:first-child {
                            line-height: 38/@rem;
                            span {
                                font-size: 26/@rem;
                            }
                        }
                        .shop-discount {
                            display: inline-block;
                            background-color: #FEEEF4;
                            border: solid 1/@rem #ff0036;
                            padding: 0 7/@rem;
                            color: #ff0036;
                        }
                        .shop-price {
                            margin-top: 12/@rem;
                            display: flex;
                            justify-content: space-between;
                            color: #ff0036;
                            .item-price {
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;
                                font-weight: bold;
                            }
                            img {
                                height: 20/@rem;
                            }
                            & > div:last-child {
                                width: 48/@rem;
                                height: 48/@rem;
                                background-color: #FF0045;
                                border-radius: 50%;
                                //       变成内容区宽度44/@rem
                                //       box-sizing:border-box时 一个元素给定了宽度和高度，如果给它设置border或者padding就会把内容区的宽度分掉
                                //       padding: 2/@rem;
                                //如果设置的是margin则不会对元素内容区的宽高产生影响
                                display: table-cell;
                                //变成单元格之后可以使vertical-align和text-align来让元素水平或者垂直居中
                                text-align: center;
                                img {
                                    padding: 10/@rem;
                                    height: 48/@rem;
                                    width: 48/@rem;
                                }
                            }
                        }
                    }
                }
            }
        }
        .fam {
            .fam-tit {
                height: 62/@rem;
                line-height: 62/@rem;
                text-align: center;
                span {
                    font-size: 36/@rem;
                    font-weight: bold;
                    color: white;
                }
            }
            .fam-list {
                display: grid;
                grid-template-rows: repeat(6,416/@rem);
                grid-template-columns: repeat(3,auto);
                grid-gap: 10/@rem;
                .fam-detail {
                    & > * {
                        flex: 1;
                    }
                    padding: 10/@rem;
                    position: relative;
                    background-color: #fff;
                    //使用纵向的弹性布局
                    display: flex;
                    flex-direction: column;
                    .fam-img {
                        img {
                            width: 210/@rem;
                            height: 210/@rem;
                        }
                    }
                    .fam-num {
                        //挪动之后原来元素的位置并不会被占据 根据是否需要保存元素原本的位置来决定是用绝对定位还是相对定位
                        position: absolute;
                        top: 191/@rem;
                        left: 0;
                        text-align: center;
                        color: #fff;
                        background-color: #ff0036A6;
                        width: 172/@rem;
                        height: 32/@rem;
                        line-height: 32/@rem;
                    }
                    & > div:nth-child(3) {
                        span {
                            font-size: 26/@rem;
                            margin-top: 4/@rem;
                            display: block;
                            width: 202/@rem;
                            height: 40/@rem;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                    .explain {
                        width: 202/@rem;
                        height: 36/@rem;
                        span {
                            color: #999;
                        }
                    }
                    .fam-discount {
                        //作为弹性子元素无法让内容撑开宽度 不设置的话默认铺满整个宽度 inline-flex可以让子元素自适用宽高
                        span {
                            background-color: #FEEEF4;
                            border: solid 1/@rem #ff0036;
                            padding: 0 7/@rem;
                            color: #ff0036;
                        }
                    }
                    .fam-price {
                        display: flex;
                        justify-content: space-between;
                        color: #ff0036;
                        .item-price {
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            font-weight: bold;
                        }
                        img {
                            height: 20/@rem;
                        }
                        & > div:last-child {
                            width: 48/@rem;
                            height: 48/@rem;
                            background-color: #FF0045;
                            border-radius: 50%;
                            //       变成内容区宽度44/@rem
                            //       box-sizing:border-box时 一个元素给定了宽度和高度，如果给它设置border或者padding就会把内容区的宽度分掉
                            //       padding: 2/@rem;
                            //如果设置的是margin则不会对元素内容区的宽高产生影响
                            display: table-cell;
                            //变成单元格之后可以使vertical-align和text-align来让元素水平或者垂直居中
                            text-align: center;
                            img {
                                padding: 10/@rem;
                                height: 48/@rem;
                                width: 48/@rem;
                            }
                        }
                    }
                }
            }
        }
    }
}